import React, { useState, useEffect } from 'react';
import { useSearchParams } from "react-router-dom";
import { LoadingOutlined, PlayCircleFilled } from '@ant-design/icons';
import { Spin } from 'antd';
import { indexSearch, indexCheckMusic } from '../../api/indexApi'

// 关键字染色
import { highlightSearchResult } from '../../math'
// 时间格式转换
import { formatTime, formatNumber } from '../../math'



const antIcon = (
    <LoadingOutlined
        style={{
            fontSize: 24,
        }}
        spin
    />
);

const playIcon = (<PlayCircleFilled
    style={{
        fontSize: 18,
        color: '#b3b3b3',
        padding: '10px'
    }}
/>
)

function Playlists() {
    const [searchpool, setSearchpool] = useState([]); // 保存搜索结果
    const [loading, setLoading] = useState([]); // 加载状态
    // let [aaa, setaaa ] =useState([])
    // 获取路由传递的搜索值参数
    const [searchParams] = useSearchParams();
    const s = searchParams.get('s');
    // 单曲请求
    useEffect(() => {
        // console.log(s);
        if (s) {
            setLoading(true)
            indexSearch(s, '1000', 20)
                .then((res) => {
                    if(res.data.result.playlists){
                        setSearchpool(res.data.result.playlists)
                        setLoading(false)
                    }else{
                        setLoading(false)
                        setSearchpool([])
                    }
                })
                .catch((err) => {
                    console.error(err)
                    setLoading(false)
                })
        } else {
            setLoading(false)
        }
    }, [s]);

    

    // 查询音乐是否可用
    // async function checkMusic(value) {
    //     let a
    //     await indexCheckMusic(value).then((res)=>{
    //         a = res.data.success
    //     })
    //     return a
    // }

    return (
        <div className='searchPlaylistcontainer'>
            <div className='count'> 搜索"{s}",找到<span>{searchpool.length}</span>个歌单</div>
            {
                loading ? (
                    <Spin indicator={antIcon} tip="Loading"><div className='loadingbox'></div></Spin>
                ) : (
                    searchpool.map((item) => {
                        return <li className='searchli' key={item.id}>
                            {playIcon}
                            {/* 图片 */}
                            <img title={item.name} src={item.coverImgUrl}></img>
                            {/* 歌单名 */}
                            <span title={item.name} className='linka'>{highlightSearchResult(item.name,s)}</span>

                            {/* 操作按钮 */}
                            <div className='tools'>
                                <span title='添加到播放列表'><svg t="1678174573174" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5619"><path d="M953.37931 512C953.37931 268.232939 755.767084 70.62069 512 70.62069 268.232934 70.62069 70.62069 268.232939 70.62069 512 70.62069 755.767061 268.232934 953.37931 512 953.37931 755.767084 953.37931 953.37931 755.767061 953.37931 512ZM547.310345 476.689655 547.310345 264.858364C547.310345 245.21731 531.501374 229.517241 512 229.517241 492.362681 229.517241 476.689655 245.340001 476.689655 264.858364L476.689655 476.689655 264.858359 476.689655C245.217315 476.689655 229.517241 492.498635 229.517241 512 229.517241 531.637326 245.340001 547.310345 264.858359 547.310345L476.689655 547.310345 476.689655 759.141636C476.689655 778.78269 492.498626 794.482759 512 794.482759 531.637319 794.482759 547.310345 778.659999 547.310345 759.141636L547.310345 547.310345 759.141694 547.310345C778.78272 547.310345 794.482759 531.501365 794.482759 512 794.482759 492.362674 778.660017 476.689655 759.141694 476.689655L547.310345 476.689655ZM0 512C0 229.230209 229.230204 0 512 0 794.769832 0 1024 229.230209 1024 512 1024 794.769791 794.769832 1024 512 1024 229.230204 1024 0 794.769791 0 512Z" p-id="5620"></path></svg></span>
                                <span title='收藏'><svg t="1678174921699" viewBox="0 0 1179 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8750"><path d="M142.31918 540.267127l350.13559 373.653781c54.296613 63.852817 139.806023 63.883844 195.033436-1.054906l362.204951-388.670672c42.661625-48.866952 65.466202-112.130263 65.466203-182.902021a279.239726 279.239726 0 0 0-501.018122-169.653647 30.99561 30.99561 0 0 1-25.534922 12.131415 30.99561 30.99561 0 0 1-25.503895-12.131415A279.239726 279.239726 0 0 0 62.053272 341.293309c0 72.850542 28.792718 144.242832 77.411458 195.498835 1.054906 1.116959 1.985705 2.264944 2.85445 3.474983z m-54.606879 31.926409A349.732244 349.732244 0 0 1 0 341.293309C0 152.806494 152.806184 0.00031 341.292999 0.00031c95.065613 0 183.708713 39.155615 247.313317 106.111096A340.486306 340.486306 0 0 1 835.95066 0.00031c188.486815 0 341.292999 152.806184 341.292999 341.292999 0 80.793361-25.069522 154.636755-72.198982 213.463257-1.147986 1.923651-2.482131 3.754223-4.095516 5.491715l-5.181449 5.553768c-2.699317 3.071637-5.491715 6.112247-8.315138 9.090804-0.620533 0.620533-1.210039 1.241065-1.861598 1.799545L733.810974 954.069375c-79.055869 93.048882-209.553901 93.017855-287.616918 1.147985L90.783938 576.040839a31.243823 31.243823 0 0 1-3.102664-3.847303z" p-id="8751"></path></svg></span>
                                <span title='分享'><svg t="1678175020371" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10993"><path d="M768.73106 703.537712c-35.606921 0-67.945574 14.793214-91.167479 38.359147l-309.109357-171.670082c9.116748-17.545439 14.621199-37.155048 14.621199-58.312783 0-12.55703-2.408198-24.426004-5.676466-35.950949l304.63699-189.215522c22.705863 20.469679 52.464304 33.198723 85.146985 33.198723 70.525785 0 127.978498-57.452713 127.978498-127.978498S837.708718 63.989249 767.182933 63.989249s-127.978498 57.452713-127.978498 127.978498c0 14.621199 2.92424 28.382328 7.396607 41.455401L344.716278 420.746514c-23.049891-22.705863-54.700487-36.983034-89.791366-36.983034-70.525785 0-127.978498 57.452713-127.978498 127.978498s57.452713 127.978498 127.978498 127.978498c25.630102 0 49.540064-7.740635 69.493701-20.813707l321.150344 178.378633c-3.096254 11.008903-5.160423 22.18982-5.160423 34.058794 0 70.525785 57.452713 127.978498 127.978498 127.978498s127.978498-57.452713 127.978498-127.978498S839.256845 703.537712 768.73106 703.537712zM767.182933 127.978498c35.262893 0 63.989249 28.726356 63.989249 63.989249s-28.726356 63.989249-63.989249 63.989249-63.989249-28.726356-63.989249-63.989249S731.92004 127.978498 767.182933 127.978498zM191.107677 511.913993c0-35.262893 28.726356-63.989249 63.989249-63.989249s63.989249 28.726356 63.989249 63.989249-28.726356 63.989249-63.989249 63.989249S191.107677 547.176886 191.107677 511.913993zM768.73106 895.505459c-35.262893 0-63.989249-28.726356-63.989249-63.989249s28.726356-63.989249 63.989249-63.989249 63.989249 28.726356 63.989249 63.989249C832.720309 866.951117 803.993953 895.505459 768.73106 895.505459z" p-id="10994"></path></svg></span>
                                <span title='下载'><svg t="1678174667005" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6634"><path d="M808.192 246.528a320.16 320.16 0 0 0-592.352 0A238.592 238.592 0 0 0 32 479.936c0 132.352 107.648 240 240 240h91.488a32 32 0 1 0 0-64H272a176.192 176.192 0 0 1-176-176 175.04 175.04 0 0 1 148.48-173.888l19.04-2.976 6.24-18.24C305.248 181.408 402.592 111.936 512 111.936a256 256 0 0 1 242.208 172.896l6.272 18.24 19.04 2.976A175.04 175.04 0 0 1 928 479.936c0 97.024-78.976 176-176 176h-97.28a32 32 0 1 0 0 64h97.28c132.352 0 240-107.648 240-240a238.592 238.592 0 0 0-183.808-233.408z" p-id="6635"></path><path d="M649.792 789.888L544 876.48V447.936a32 32 0 0 0-64 0V876.48l-106.752-87.424a31.968 31.968 0 1 0-40.544 49.504l159.04 130.24a32 32 0 0 0 40.576 0l158.048-129.44a32 32 0 1 0-40.576-49.472z" p-id="6636"></path></svg></span>
                            </div>

                            {/* 作者 */}
                            <span title={item.creator.nickname} className='artists linka'>by <span className='linka'>{highlightSearchResult(item.creator.nickname,s)}</span></span>

                            {/* 包含歌曲 */}
                            <span className='playlistinfo trackCount'>{item.trackCount}首</span>

                            {/* 收藏 */}
                            <span className='playlistinfo bookCount'>收藏：{formatNumber(item.bookCount)}</span>

                            {/* 收听歌曲 */}
                            <span className='playlistinfo playCount'>收听：{formatNumber(item.playCount)}</span>
                        </li>
                    })
                )
            }
        </div>
    );
}

export default Playlists;